<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-demo</title>
    <script src="./js/d3.min.js"></script>
</head>

<body>
    <div>Hello World!</div>
    <div class="myclass" style="font-size: 40px;">mycalss</div>
    <div id="myid">myid</div>

    <ul id="list">
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    // 通过标签名、类名、id查找
    // alert(d3.select("div").text());
    // alert(d3.select(".myclass").text());
    // alert(d3.select("#myid").text());

    // 查找元素后添加元素及元素内容
    // d3.select("div.myclass").append("span").text("append span text")

    // 修改元素内容
    // d3.select(".myclass").html("Hello World! <span style='color:blue'>from D3.js</span>");

    // 设置样式 （覆盖全部样式） font-size : 40px 不生效
    // d3.select(".myclass").attr("style", "color: red");
    // 设置样式 （添加样式）
    // d3.select(".myclass").style("color", "red");

    // 添加一个类名 参数说明： 第一个为类名 第二个为布尔类型 true表示添加 false表示删除
    // d3.select(".myclass").classed("myanotherclass", true);
    // d3.select(".myclass").classed("myclass", false);
    // d3.select(".myclass").classed("myanotherclass");

    // 查询所有
    // d3.selectAll(".myclass").attr("style", "color: red");

    /** 设置数据 
     * data（）方法用于将数据集分配给HTML文档中的元素集合。
     * enter（）方法输出之前没有图形元素的数据项集。
     * exit（）方法输出不再存在数据的图形元素集。
    */
    d3.select("#list").selectAll("li")
        .data([10, 20, 30, 25, 15])
        .text(function (d) { return d; })
        .enter()
        .append("li")
        .text(function (d) { return d; })

    d3.selectAll("li")
        .data([10, 20, 30])
        .exit()
        .remove()
</script>

</html>